<template>
  <common-page title="字段配置">
    <el-button slot="header" @click="back">返回</el-button>

    <common-list slot="content">
      <!-- 按钮组织start -->
      <el-row slot="tools" :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" @click="edit(null)" v-hasPermi="['system:index:add']">新增</el-button>
        </el-col>
      </el-row>
      <!-- 按钮组织end -->
      <common-table slot="content" v-loading="loading" :data="list">

        <el-table-column label="字段名称" align="left" prop="columnName" >
          <template slot-scope="{ row }">{{ row.columnName }}</template>
        </el-table-column>

        <el-table-column label="字段别名" align="left" prop="columnAlias">
          <template slot-scope="{ row }">{{ row.columnAlias }}</template>
        </el-table-column>

        <el-table-column label="字段类型" align="left" prop="columnType">
          <template slot-scope="{ row }">{{ row.columnType }}</template>
        </el-table-column>

        <el-table-column label="时间格式" align="left" prop="dateFormat" >
          <template slot-scope="{ row }">{{ row.dateFormat }}</template>
        </el-table-column>

        <el-table-column label="统计字段" align="left" prop="isStatistics">
          <template slot-scope="{ row }">
            <el-switch v-model="row.isStatistics" :active-value="0" :inactive-value="1"
                       @change="(val) => editConfig(val,row.id,'isStatistics')"></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="指标字段" align="left" prop="isShow">
          <template slot-scope="{ row }">
            <el-switch v-model="row.isShow" :active-value="0" :inactive-value="1"
                       @change="(val) => editConfig(val,row.id,'isShow')"></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="条件字段" align="left" prop="isSearch">
          <template slot-scope="{ row }">
            <el-switch v-model="row.isSearch" :active-value="0" :inactive-value="1"
                       @change="(val) => editConfig(val,row.id,'isSearch')"></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="left" width="90">
          <template slot-scope="{row}">
            <el-button type="text" @click="edit(row)" v-hasPermi="['system:index:edit']">编辑</el-button>
            <el-button type="text" @click="del(row.id)" v-hasPermi="['system:index:delete']">删除</el-button>
          </template>
        </el-table-column>
      </common-table>

      <pagination slot="pagination" v-show="total > 0" :total="total" :page.sync="query.pageNum"
                  :limit.sync="query.pageSize"
                  @pagination="getList"/>
    </common-list>

    <editConfigDialog ref="editConfigDialog" @refresh="getList"/>
  </common-page>
</template>

<script>
import editConfigDialog from './editConfigDialog.vue'
import {
  repertory_column_list,
  repertory_column_remove,
  repertory_column_edit
} from '@/api/management/echart/repertory'

export default {
  name: '',
  components: { editConfigDialog },
  data() {
    return {
      total: 0, // 总条数
      loading: false, // table 加载中
      list: [], // 数据列
      selectionIds: '', // 列表选中数据id
      single: true, // 非单个禁用
      multiple: true, // 非多个禁用
      query: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  // 方法
  methods: {
    editConfig(val, id, key) {
      repertory_column_edit({
        id: id,
        [key]: val
      }).then((res) => {
        this.$GlobalSuccessMessage('设置成功')
      })
    },
    /**
     * 删除
     */
    del(ids) {
      this.$GlobalDeleteConfirm().then(() => {
        repertory_column_remove({ ids: ids }).then((res) => {
          if(res && res.code === 200) {
            this.query.pageNum = 1
            this.getList()
            this.$GlobalSuccessMessage('删除成功')
          } else {
            this.$GlobalErrorConfirm("删除失败", res.msg).then();
          }
        })
      }).catch(()=>{});
    },
    /**
     * 返回
     */
    back() {
      this.$emit('back')
    },
    /**
     * 获取列表
     */
    getList() {
      this.loading = true
      let query = { ...this.query }
      repertory_column_list(query).then((res) => {
        this.list = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    /**
     * 添加/编辑
     */
    edit(row) {
      let parent = {
        indexId: this.query.indexId
      }
      this.$refs.editConfigDialog.show(row ? { ...row, ...parent } : { ...parent })
    },
    show(row) {
      this.query = {
        indexId: row.id,
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  }
}
</script>
<style lang="scss" scoped>

</style>
